<template>
  <PageModal
    :show="show"
    :page-style="pageStyle"
    :footer-size="footerSize"
    :footer-style="footerStyle"
    @close="closeModal"
  >
    <view class="cool-water">
      <view class="title">{{ $t('BIWD.CoolWaterSet.Title') }}</view>
      <view class="params-set">
        <view class="cool-switch display-between">
          <view class="cool-label">{{ $t('BIWD.CoolWaterSet.CoolWaterSwitch.Label') }}</view>
          <switch color="#108ee9" :checked="coolWaterSwitch" @change="changeCoolWater" />
        </view>
        <view class="cool-temp display-around" :class="{ 'switch-off': !coolWaterSwitch }">
          <view
            class="temp disabled-cool-water"
            :class="{ active: coolWaterSwitch && coolWaterTemp === 10 }"
            @click="setCoolWaterTemp(10)"
            >10°C</view
          >
          <view
            class="temp disabled-cool-water"
            :class="{ active: coolWaterSwitch && coolWaterTemp === 15 }"
            @click="setCoolWaterTemp(15)"
            >15°C</view
          >
        </view>
      </view>
    </view>
  </PageModal>
</template>
<script setup lang="ts">
import { setHomeApplianceSettings } from '@/api/appliance'
import PageModal from '@/common/pageModal.vue'
import { BIWD_WATERTREATMENT_CHILLEDWATERSET, BIWD_WATERTREATMENT_CHILLEDWATERTEMPERATURE } from '@/constants/WDCommand'
import type { BIWDController } from '@/controller/BIWD/definition'
import { footerStyle, footerSize } from '@/layout/appliance/style'
import type { CSSProperties } from 'vue'

const pageStyle: CSSProperties = {
  backgroundColor: '#ffffff',
}

const props = defineProps<{
  show: boolean
  haId: string
  control: BIWDController.Control
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
}>()

const store = props.control.store
const coolWaterSwitch = computed(() => store.coolWaterSwitch === 1)
const coolWaterTemp = computed(() => store.coolWaterTemp)

/**
 * 设置冰水开关
 */
function changeCoolWater() {
  let settings = [
    {
      key: BIWD_WATERTREATMENT_CHILLEDWATERSET,
      value: store.coolWaterSwitch === 0 ? 'TRUE' : 'FALSE',
    },
    {
      key: BIWD_WATERTREATMENT_CHILLEDWATERTEMPERATURE,
      value: store.coolWaterTemp,
    },
  ]
  setSettingFun(settings)
}
/**
 * 设置冰水温度
 */
function setCoolWaterTemp(temp: number) {
  let settings = [
    {
      key: BIWD_WATERTREATMENT_CHILLEDWATERSET,
      value: 'TRUE',
    },
    {
      key: BIWD_WATERTREATMENT_CHILLEDWATERTEMPERATURE,
      value: temp,
    },
  ]
  setSettingFun(settings)
}
/**
 * 下发设置指令
 * @param settings
 */
async function setSettingFun(settings: { key: string; value: number | string }[]) {
  await setHomeApplianceSettings(props.haId, settings)
}
/**
 * 退出页面
 */
function closeModal() {
  emit('update:show', false)
  emit('close')
}
</script>

<style lang="less">
@import '@/styles/common.less';

.cool-water {
  font-family: PingFang SC;
  font-style: normal;
  padding: 42rpx 32rpx 0;
  .switch-off .disabled-cool-water {
    opacity: 0.3;
    pointer-events: none;
  }
  .title {
    width: 100%;
    padding: 0 12rpx 24rpx;
    color: var(--dack-color);
    font-size: 48rpx;
    font-weight: 500;
  }
  .params-set {
    width: 100%;
    height: 252rpx;
    background-color: #f4f4f6;
    padding: 26rpx 24rpx 0;
    box-sizing: border-box;
    .cool-switch {
      .cool-label {
        font-size: 28rpx;
        font-weight: 500;
        color: var(--dack-color);
      }
    }
    .cool-temp {
      margin-top: 62rpx;
      .temp {
        font-size: 56rpx;
        font-weight: 400;
        color: rgba(var(--dack-color), 0.8);
      }
      .active {
        color: var(--primary-color);
        opacity: 1;
      }
    }
  }
}
</style>
